<script setup lang="ts">
import type {KeyValue} from "~/types";

const defaultForm={date:'',order:'',type:'',program:''};
const form=reactive({...defaultForm});
const typesList=ref<Array<KeyValue>>([
  {label:'一口价',value:1},
  {label:'PUSH域名',value:2},
])
</script>

<template>
  <div>
    <AuthenText>
<pre>
关于设置默认模板的说明：
1、每个账户只能设置一个默认模板，设置前，模板必须先通过审核。
2、默认模板作用：您的账户注册域名，得标域名，转入域名，PUSH域名，购买域名，等等操作，系统会将域名Whois信息设置为默认模板的信息。
3、如果账户没有设置默认模板，您的账户域名解析权限将被暂时关闭。</pre>
    </AuthenText>
    <div class="mt-4">
      <el-form>
        <el-form-item>
          <div class="grid grid-cols-5 gap-2">
            <el-input placeholder="订单号/域名，多个逗号分割"></el-input>
            <el-select placeholder="请选择类型">
              <el-option v-for="item in typesList" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select placeholder="请选择状态">
              <el-option v-for="item in typesList" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button type="primary" class="w-1/2">搜索</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>
    <el-card class="flex-1">
      <el-table
          :data="[{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }]"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="编号"
            >
          <template #defalut="scope">
            <div>郓城县红硕计算机软件开发中心</div>
            <div><span class="text-xl font-bold">法人：</span>刘金宝</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="类型" sortable>
        </el-table-column>
        <el-table-column
            prop="address"
            label="模版名称">
          <template #defalut="scope">
            <div class="text-[var(--el-color-primary)]">认证通过 <span>未绑定</span></div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="域名数量" >
        </el-table-column>
        <el-table-column
            prop="address"
            label="联系人">
          <template #defalut="scope">
            <div class="text-[var(--el-color-primary)]"><el-button>申请退回</el-button></div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="邮箱">
          <template #defalut="scope">
            <div class="text-[var(--el-color-primary)]"><el-button>申请退回</el-button></div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="当前状态">
          <template #defalut="scope">
            <div class="text-[var(--el-color-primary)]"><el-button>申请退回</el-button></div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="是否默认">
          <template #defalut="scope">
            <div class="text-[var(--el-color-primary)]"><el-button>申请退回</el-button></div>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
          <template #defalut="scope">
            <div class="grid grid-cols-3">
              <el-button>查看</el-button>
              <el-button>默认</el-button>
              <el-button>删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <MyPage v-model:page="form.page" v-model:perpage="form.perpage" v-model:total="form.total"></MyPage>
    </el-card>
  </div>

</template>

<style scoped lang="scss">
.border-right{
  &:last-child{
    border-right: none;
  }
  padding-left: 20px;
  border-right: 1px solid var(--el-border-color);
}
</style>